<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head >
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/font/iconfont.css">
    <!-- 上面是公共页面的样式 -->
    <script th:src="@{/js/vue.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>
    <link th:href="@{/css/comicDetail.css}" rel="stylesheet">
    <link th:href="@{/css/comicDetailnew.css}" rel="stylesheet">
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <!-- 弹框引入的两个引用 -->
    <link th:href="@{/css/sweetalert.css}" rel="stylesheet">
    <script th:src="@{/js/sweetalert-dev.js}"></script>
    <!-- 引入element -->
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


    <style>

        /*上面是重写的公共页样式*/
        .works-chapter-log a:hover {
            color: #fa8729;
        }

        .works-chapter-item a:hover {
            color: #fa8729;
        }
    </style>
    <script type="text/javascript">


        function showMore() {
            document.getElementById("chapter-page-more1").style.display = "block";
        }

        function hideMore() {
            document.getElementById("chapter-page-more1").style.display = "none";
        }

        /*function rate(obj, oEvent) {
            // 图片地址设置

            var imgSrc = '/images/star_off.gif'; //没有填色的星星
            var imgSrc_2 = '/images/star_on.gif'; //打分后有颜色的星星
            if (obj.rateFlag) return;
            var e = oEvent || window.event;
            var target = e.target || e.srcElement;
            var imgArray = obj.getElementsByTagName("img");
            for (var i = 0; i < imgArray.length; i++) {
                imgArray[i]._num = i;
                imgArray[i].onclick = function () {
                    if (obj.rateFlag) return;
                    obj.rateFlag = true;
                    this.initUser();
                    if(this.uid==null){
                        swal("请先登陆!");
                        this.initMyScore()
                    }else{
                        swal("感谢您的评分:"+(this._num+1)*2); //this._num*2这个数字写入到数据库中,作为评分的依据
                        // 打印一下parentId
                        let url =  'http://localhost:9999/' + "score/add";
                        axios.post(url,{
                            uid:this.uid,
                            rid:this.rid
                        }).then(res =>{

                            if(res.data.code == 200){
                                this.$message({
                                    message:res.data.msg,
                                    type:'success',
                                    duration:1000
                                })
                                this.initMyScore()
                            }else{
                                this.$message({
                                    message:res.data.msg,
                                    type:'error',
                                    duration:1000
                                })
                            }
                        })
                    }

                    if (target.tagName == "IMG") {
                        for (var j = 0; j < imgArray.length; j++) {
                            if (j <= target._num) {
                                imgArray[j].src = imgSrc_2;
                            } else {
                                imgArray[j].src = imgSrc;
                            }
                        }
                    } else {
                        for (var k = 0; k < imgArray.length; k++) {
                            imgArray[k].src = imgSrc;
                        }
                    }



                };
            }

        }*/

        // 获取地址栏参数的js方法,通过它获得id——初始化漫画
        function GetQueryString(name){

            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }


    </script>
    <script>
        function showStar(value){
            let s = value;
            console.log(s);
            for(let i=1;i<=s;i++){
                document.getElementById('star'+i).src="/images/star_on.gif"
            }

        }
        function noStar(){
            for(let i=1;i<6;i++){
                document.getElementById("star"+i).src = "/images/star_off.gif"
            }
        }
    </script>
    <title>在线漫画-在线漫画-NB漫画在线观看</title>

    <!--    <title></title>-->
<body>

<!---------- 顶部页面 ---------->
<div  id="header">
    <!-- 最顶部 -->
    <div class="header-top" id="loginDiv">
        <div class="auto-width">
            <ul class="header-guide fl" style="width: 300px">
                <li class="guide-item">
                    <a href="/">首页</a>
                </li>
                <li class="guide-item">
                    <a href="http://localhost:9999/search?tagId=0">分类</a>
                </li>
                <li class="guide-item">
                    <a href="http://localhost:9999/rankList">排行榜</a>
                </li>
            </ul>
            <div class="search-box fl">
                <form action="http://localhost:9999/search?" method="get">
                    <input type="text" class="fl search-text" placeholder="请输入漫画名" name="name" >
                    <button class="fl search-btn">
                        <i class="iconfont icon-search"></i>
                    </button>
                </form>
            </div>
            <ul class="header-guide fr" style="width: 300px">
                <!--登录注册-->
                <li v-if="!loginUser.username" class="guide-item">
                    <a href="http://localhost:9999/login">登录/注册</a>
                </li>
                <li class="guide-item login"  v-if="loginUser.username">
                    <a  :href="'http://localhost:9999/person?loginUser.id'" >
                        <img :src="'http://localhost:8081/Imgs/headImg/'+loginUser.avatar" style="width: 40px;height: 40px;position:relative; top:5px" >&nbsp;&nbsp;
                        {{loginUser.username}}
                    </a>
                </li>
                <li class="guide-item history" v-if="loginUser.username">
                    <a href="" @click="userExit()">退出</a>
                </li>
            </ul>
        </div>
    </div>


</div>

<!---------- 主体内容 ---------->
<div style="margin-top: 50px" id="comicDetail"  >



<div id="special_bg" ><!-- 日漫特有作品背景 -->

    <!--标签-->
    <div style="display:none">
        <p>
            <!--标签-->
            <a target="_blank" title="古风">{{tagName}}</a>&nbsp;
        </p>
    </div>


    <div class="ui-wm ui-mb40 clearfix" style="width: 1160px">
        <div class=" works-intro-wr" style="width: 1160px">
            <div class="works-intro clearfix">
                <div class="works-cover ui-left">
                    <a href="#" :title=comic.name>
                        <!--封面图片-->
                        <img :src="'http://localhost:8081/imgs/resource/'+rid +'/'+comic.cover" height="280" width="210" alt="" loading="eager">
                    </a>
                    <div class="works-cover-shadow"></div>
                    <label class="works-intro-status">连载中</label>
                </div>
                <div class="works-intro-detail ui-left">
                    <div class="works-intro-text">
                        <div class="works-intro-head clearfix">
                            <!--书名-->
                            <h2 class="works-intro-title ui-left"><strong>{{comic.name}}</strong></h2>
                        </div>
                        <div class="works-score clearfix">
                            <div class="works-score-act ui-left">
                                <!-- 尝试新的代码 -->


                                <!--思路有了-->
                                <!--打分图片 换html代码-->
                                <div id="score" class="works-intro-star mod-star ui-right"
                                     style="cursor: pointer; width: 136px" >
                                    <img id="star1" th:src="@{/images/star_off.gif}" alt="1" title="很差"  onmouseover="showStar(1)" onmouseout="noStar()" v-on:click="saveStar(1)">
                                    <img id="star2" th:src="@{/images/star_off.gif}" alt="2" title="较差"  onmouseover="showStar(2)" onmouseout="noStar()" v-on:click="saveStar(2)">
                                    <img id="star3" th:src="@{/images/star_off.gif}" alt="3" title="还行"  onmouseover="showStar(3)" onmouseout="noStar()" v-on:click="saveStar(3)">
                                    <img id="star4" th:src="@{/images/star_off.gif}" alt="4" title="推荐"  onmouseover="showStar(4)" onmouseout="noStar()" v-on:click="saveStar(4)">
                                    <img id="star5" th:src="@{/images/star_off.gif}" alt="5" title="力荐"  onmouseover="showStar(5)" onmouseout="noStar()" v-on:click="saveStar(5)">
                                    <input type="hidden" name="score"></div>
                                <label id="score-label" class="ui-left">请您评分：</label>
                            </div>
                            <p class="ui-left">
                                <!--评分-->
                                评分：<strong class="ui-text-orange">{{avgScore}}</strong>
                                <!--人数-->
                                (<span>{{voteNum}}</span>人评分)
                            </p>
                            <div class="ui-right" style="position:relative;margin-top:-30px;margin-right: 40px">
                                <p class="clearfix">
                                    <img src="/images/report.png" alt="" width="18px" height="24px"
                                         style="position: relative;top:20px">
                                    <a id="works_report_active" class="works-report ui-right"
                                       title="举报" @click="showAddDialog(2,rid)">举报</a>
                                    <!---->
                                </p>
                            </div>
                        </div>
                        <p class="works-intro-digi">
                            <!--作者-->
                            <span class="first" style="padding-right: 10px;">作者：<em style="max-width: 168px;">{{comic.writer}}</em></span><em
                                style="max-width: 168px;">
                            <!--人气-->
                            <span>人气：<em>{{comic.popularity}}亿</em></span>
                            <!--收藏数-->
                            <span>收藏数：<em id="coll_count">{{comic.collectionCount}}</em></span>
                        </em></p>

                        <em style="max-width: 168px;">
                            <!--简介-->
                            <p class="works-intro-short ui-text-gray9">
                                {{comic.introduceText}}
                            </p>
                        </em>
                    </div>
                    <em style="max-width: 168px;">
                        <div class="works-intro-opera">
                            <div class="ui-left">
                                <p class="works-intro-tags">
                                    <span class="ui-left">标签：</span>
                                    <span id="tags-show" class="tags-show">
                                        <a :href="'http://localhost:9999/search?tagId='+comic.tagId" data-index="2001"
                                           class="works-intro-tags-item works-tags-" :title="tagName" style="cursor:pointer">{{tagName}}</a>
                                    </span>
                                </p>
                                <div class="works-intro-active clearfix">
                                    <a class="works-intro-view ui-btn-orange ui-radius3" :href="'http://localhost:9999/read?rid='+rid+'&sid='+firstSection">开始阅读</a>
                                    <div class="works-button-wr ">
                                        <div id="div_collection_btn" class="ui-left">
                                            <a id="works-favorite" class="works-intro-fav ui-btn-pink" collection="add"
                                               title="收藏" href="javascript:void(0);"
                                               onmouseover="style='background-color:#fcf1e1'"
                                               onmouseout="style='background-color:#fffbf6'">
                                                <i class="unfav" id="unfav"
                                                    v-on:click="isCollection()" v-if="isCol==0">收藏</i>
                                                <i class="hasfav" id="hasfav"
                                                    v-on:click="isCollection()" v-if="isCol==1">取消</i>
                                            </a>
                                        </div>
                                        <div style="border:0.5px solid;float:left;height:20px;margin-top:10px; color:lightslategrey"></div>
                                        <a href="javascript:void(0);"
                                           class="works-intro-ticket pop-month-tic ui-btn-pink" title="投月票"
                                           onmouseover="style='background-color:#fcf1e1'"
                                           onmouseout="style='background-color:#fffbf6'"><i
                                                class="icon-ticket" v-on:click="voteMTicket()">投月票</i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="ui-right">
                                <p class="clearfix">
                                    <!---->
                                <div class=" clearfix">
                                    <ul class="works-vote-list ui-left clearfix">
                                        <li>
                                            <strong id="redcount">{{comic.red}}</strong>
                                            <a id="vote-red"  class="works-vote-red works-vote-btn"
                                                title="红票"
                                               onmouseover="style='background-image:url(/images/rednew.png)'"
                                               onmouseout="style='background-image:url(/images/red.png)'" v-on:click="voteThumb(1)">红票</a>
                                            <p>红票</p>
                                        </li>
                                        <li>
                                            <strong>{{comic.black}}</strong>
                                            <a id="vote-black"  class="works-vote-black works-vote-btn"
                                                title="黑票"
                                               onmouseover="style='background-image:url(/images/blacknew.png)'"
                                               onmouseout="style='background-image:url(/images/black.png)'" v-on:click="voteThumb(2)">黑票</a>
                                            <p>黑票</p>
                                        </li>
                                    </ul>
                                </div>
                                </p>
                            </div>
                        </div>
                    </em>
                </div>
                <em style="max-width: 168px;">
                </em></div>

        </div>
    </div>
    <em style="max-width: 168px;">

        <div class="subscribe-tip-wrap ui-wm clearfix">
            <div class="subscribe-tip" id="subscribe-tip" style="visibility: hidden;"><span id="subscribe-tip-txt">订阅漫画到桌面，追漫画更方便哦</span><a
                    href="javascript:void(0)" id="subscribe-tip-close" class="tip-close"></a>
            </div>
        </div>
        <div class="works-chapter-wr works-stack ui-wm ui-mb40">
            <ul class="words-xone-menu clearfix works-chapter-menu">
                <li class="active">
                    <a href="javascript:void(0)">章节列表</a>
                </li>
            </ul>
            <div class="works-chapter-list-tabcon">
                <div class="works-chapter-list-con" id="chapter">
                    <div class="works-chapter-top subscribe-wrap" style="width: 1020px;">
                        <ul class="works-chapter-log ui-left">
                            <li><span class="ui-font-fb" >上次看到：</span><a id="comic_history_648096"
                                                                        :href="'http://localhost:9999/read?rid='+rid+'&sid='+lastWatchSection.sid"
                                                                        class="" v-text="lastWatchSection.sname==null?'--':lastWatchSection.sname" style="float: right">aaa</a></li>
                            <li><span class="ui-font-fb" onClick="" style="float:left">最新话：</span>
                                <a class="works-ft-new" :href="'http://localhost:9999/read?rid='+rid+'&sid='+hotId" style="float:left">{{hotName}}</a>
                                <span class="ui-pl10 ui-text-gray6" style="float:right">{{hotTime}}</span>
                            </li>
                        </ul>
                        <div class="chapter-page-pager"><a class="chapter-page-btn-first chapter-page-btn"
                                                           v-on:click="showSection()">1-20</a><a
                                class="chapter-page-btn-all chapter-page-btn" href="javascript:void(0);"
                                onmouseover="showMore()" onmouseout="hideMore()">…</a>
                            <div id="chapter-page-more1" class="chapter-page-more" style="display:none"
                                 onmouseover="showMore()" onmouseout="hideMore()" ><a
                                    v-on:click="showMiddleSection(pageNum) " v-for="pageNum of pageCount" :key="pageNum"  v-text=pageNum===pageCount?((pageNum-1)*20+1)+'-'+total:((pageNum-1)*20+1)+'-'+20*pageNum></a>
                            </div>
                            <a class="chapter-page-btn-new chapter-page-btn active" href="javascript:void(0);" v-on:click="initLatest()">最新20话</a>
                        </div>
                        <div class="subscribe-tip-wrap sub-qqb-tip-wrap">
                            <div class="subscribe-tip" id="subscribe-qqb-tip" style="visibility: hidden;">
                                用QQ浏览器可以订阅漫画到桌面哦<a href="javascript:void(0)" class="tip-close"
                                                   id="subscribe-qbb-tip-close"></a>
                            </div>
                        </div>
                    </div>
                    <div class="works-chapter-list-wr ui-left">
                        <ol id="listAll" class="chapter-page-all works-chapter-list" style="display: none">
                            <li ><p>
                                <span
                                    class="works-chapter-item" v-for="(s,index) in allSection" :key="s.id" >
                                    <a target="_blank" :title="comic.name+'：'+s.name" :href="'http://localhost:9999/read?rid='+rid+'&sid='+s.id">
                                       {{s.name}}                               </a>
                                    <i class="ui-icon-free" v-show="s.isfree==1"></i>
                                    <i class="ui-icon-pay" v-show="s.isfree!=1"></i>


                                  </template>
                            </span>


                          <!--  <li v-for="a of 5" :key="a"><p >                                                                <span
                                    class="works-chapter-item" v-for="(s,index) of allSection" :key="index" v-if="index>=20&index<total">
                                    <a target="_blank" :title="comic.name+'：'+s.name" href="/ComicView/index/id/648096/cid/1">
                                        {{s.name}}                              </a>
                                    <i class="ui-icon-free"></i>
                                    <i clsss="ui-icon-pay"></i>
                            </span>-->
                            </p>
                               </li>

                        </ol>
                        <ol  id="listNew" class="chapter-page-new works-chapter-list" data-ping="ac_comicInfo.about.chapter">
                            <li>
                                <p >                                                                                <span
                                        class="works-chapter-item" v-for="(s,index) in sectionList" :key="index" >
                                            <a target="_blank" :title="comic.name+'：'+s.name"
                                               :href="'http://localhost:9999/read?rid='+rid+'&sid='+s.id">{{s.name}}</a>
                                            <i class="ui-icon-free" v-show="s.isfree==1">免费</i>
                                            <i class="ui-icon-pay" v-show="s.isfree!=1">付费</i>


                                </span>
                                </p>

                                </li>

                        </ol>
                    </div>
                </div>

                <!-- 番外 -->

                <!-- 全彩版 -->
            </div>
        </div>


        <!--        这是下面的和footer之间的东西-->
        <div class="ui-wm ui-mb40 clearfix">
            <div class="ui-left" >

                <!-- 自我 修改评论区页面 -->
                <div id="works-comment-wr" class="works-comment-wr" style="width:1160px">
                    <div id="plusOneWrap" class="roast-plus-wrap"></div>
                    <div style="display: block" id="div_comment_list1" class="comment-list-wr comment-nav-anchor">
                        <div class="comment-btn-wr comment-nav-wr clearfix comment-btn-fix" style="width: 883.008px;">
                            <ul class="comment-btn"><!-- 评论区筛选button -->
                                <li class="active"><a  title="全部讨论" class="btn-comment-both" @click="initFirstRemark">全部讨论</a>
                                </li>
                                <li><a  title="精华讨论" class="btn-comment-pl"
                                       onmouseover="style='background: url(/images/firenew.png) no repeat'"
                                       onmouseout="style='background: url(/images/fire.png) no repeat'" @click="initFirstHotRemark">精华讨论</a></li>
                                <li style="margin-left: 881px;margin-top:-60px"><a @click="showReplyDialog(0,0)" style="width:100px;height:59px;border:1px solid;text-align: center">评论漫画</a></li>
                            </ul>
                            <!--<a href="javascript:void(0);" title="发表话题" class="ui-btn-orange comment-btn-deliver">发表话题</a>-->
                        </div>
                        <div class="commen-con" id="commen-con">
                            <div class="clearfix" id="pagination-node">
                                <span class="ui-left">小伙伴共发了 <em class="commen-ft-ts">{{total1}}</em> 条讨论</span>
                                <span class="ui-left">（在APP上可看更多弹幕讨论，参与互动哦！）</span>
                                <div id="topic_pagination_top" class="mod_page ui-right">
                                    <a v-on:click="lastClick()" class="mod_page_prev">上一页</a>
                                    <a v-on:click="thisClick(pageNum1)" v-for="pageNum1 of pages" :key="pageNum1" v-text="pageNum1"
                                    ></a>
                                    <a v-on:click="nextClick()" class="mod_page_next">下一页</a></div>
                            </div>
                            <!-- 下面是评论循环区域 -->
                            <div v-for="f in firstRemarkList" :key="f.id" class="comment-list-content-wr clearfix"
                                   data-p="1" data-t="1">
                                <!-- left avastar -->
                                <div class="comment-userhead-wr">
                                    <a class="com-user-name" :title=f.username>
                                        <img :src="'http://localhost:8081/imgs/'+(f.avatar==''?'noface.png':('headImg/'+f.avatar))"
                                             height="92px" weight="92px" :alt="f.username" class="userhead-b" >
                                    </a>
                                    <a class="comment-content-name ft-red" target="_blank">{{f.username}}</a>
                                </div>
                                <!-- left avastar end -->

                                <!-- comment content in the right -->
                                <div class="comment-content-wr ui-left">
                                    <div class="comment-right-con">
                                        <div class="comment-top-close"></div>
                                        <p class="comment-content clearfix">
                                            <a class="comment-content-detail" style="display: inline;"
                                               href="/Community/topic/topic_id/47919274/page/1" target="_blank">
                                                {{f.remarkText}} </a>
                                        </p>

                                        <div class="comment-super-wp" style="display:none;">
                                            <a class="comment-super-dot"></a>
                                            <div class="comment-super-content">
                                                <ul class="comment-super-list"></ul>
                                                <span class="arrow"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- operation -->
                                    <div class="comment-remark clearfix comment-remark-xone">
                                        <a class="topic-btn-reply ui-right" cid="47919274"
                                           style="color:#ff7a00;padding-left:25px;margin-left:15px;" @click="showReplyDialog(f.userId,f.id)">回复(<span
                                                class="comment-zan-num">{{f.remarkCount}}</span>)</a>
                                        <a class="comment-btn-zan" @click="loveThat(f.id)">赞(<span
                                                class="comment-zan-num">{{f.likeCount}}</span>)</a>
                                        <a @click="showAddDialog(1,f.id)" style="margin-left:550px">举报</a>
                                        <span class="comment-divide"></span>
                                        <span class="comment-time"></span>
                                        <span class="comment-time">{{f.remarkTime}}</span>
                                    </div>
                                    <!-- 二级评论区域在这开始,外面有大div -->
                                    <!-- 二级评论区域 -->
                                    <!-- 下面是二级评论区域 -->
                                    <!-- 二级评论区域 -->
                                    <div class="reply-box" >
                                        <div v-for="s in secondRemarkList" :key="s.id" v-if="s.parentId==f.id" class="reply-item reply-wrap" data-index="0" :id="'second'+f.id+s.id+count"><a
                                                target="_blank" class="reply-face" style="top: 0px;" >
                                            <div class="bili-avatar" style="width: 24px;height:24px;margin-top:20px" >

                                                <img class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
                                                     :src="'http://localhost:8081/imgs/'+(f.avatar==''?'noface.png':('headImg/'+s.avatar))"
                                                     alt="">


                                                <span class="bili-avatar-icon bili-avatar-right-icon  bili-avatar-size-24"></span>
                                            </div>
                                        </a>
                                            <div class="reply-con" style="margin-top:-20px">
                                                <div class="user"><a data-usercard-mid="291318137"
                                                                     href="//space.bilibili.com/291318137"
                                                                     target="_black" class="name"
                                                                     style="color:#FB7299">{{s.username}}</a><a
                                                        class="level-link"
                                                        target="_blank"></a><span
                                                        class="stick up" style="width:16px"><div
                                                        class="tinyfont"></div></span><span class="text-con">{{s.remarkText}}</span>
                                                </div>
                                            </div>
                                            <div class="info"><span class="time">{{s.remarkTime}}</span><span @click="loveThat(s.id)"
                                                    class="like "><i></i><span>{{s.likeCount}}</span></span><span
                                                    class="reply btn-hover" @click="showAddDialog(1,s.id)">举报</span>
                                            </div>
                                        </div>
                                      <!-- 上面是二级评论循环区域 -->
                                        <div class="view-more" v-if="f.remarkCount>1">共<b>{{f.remarkCount}}</b>条回复, <a class="btn-more"
                                                                                 data-pid="103551787968"
                                                                                 data-fold="false">点击查看</a></div>
                                    </div>
                                    <!--                            隐藏的分页区域-->
                                    <!-- 隐藏的分页区域 -->
                                    <div style="display: none" class="paging-box"><span class="result">共4页</span><span class="disabled">上一页</span><span
                                            class="current">1</span><a href="javascript:;"
                                                                       class="tcd-number">2</a><a
                                            href="javascript:;" class="tcd-number">3</a><a href="javascript:;"
                                                                                           class="tcd-number">4</a><a
                                            href="javascript:" class="next">下一页</a></div>
                                    <!-- 上面是二级评论区域 -->
                                    <!-- 二级评论区域 -->
                                    <!-- 二级评论区域 -->
                                    <!-- 二级评论区域 -->
                                </div>
                                <!-- comment content in the right end -->
                            </div>
                           <!--上面是评论循环区域-->

                            <div class="mod-sub-page mod-sub-page-bottom" id="topic_pagination_bottom">
                                    <a v-on:click="lastClick()" class="mod_page_prev" style="font-size:14px;width:60px">上一页</a>
                                <a v-on:click="thisClick(pageNum1)" v-for="pageNum1 of pages" :key="pageNum1"  v-text=pageNum1></a>
                                <a v-on:click="nextClick()" class="mod_page_next">下一页</a>
                                <div class="mod_page_go">跳到<input type="text" maxlength="5" class="mod_page_ipt"
                                                                  id="ipt_page_1">页<a class="mod_page_gbtn"
                                                                                      @click="goPage()">确定</a>
                                </div>
                            </div>
                        </div>
                        <!-- data section -->
                        <input id="totalNum" type="hidden" value="207294">
                        <input id="pageIndex" type="hidden" value="1">
                        <input id="pageSize" type="hidden" value="10">
                        <input id="comicId" type="hidden" value="648096">
                        <!-- data section end-->
                        <!-- 回复的div -->
                        <div id="replyDialog" class="comment-reply-write-wr" style="display:none;">
                            <div class="comment-write comment-reply">
                                <!--<textarea id="replyInput" placeholder="大家说说看"></textarea>-->
                                <div id="replyInput" class="textarea" placeholder="我也来说一句" contenteditable="true"></div>
                                <input id="replyHidden" type="hidden" value="">
                            </div>
                            <div class="clearfix comment-sub-xone">
                                <a id="a_topic_reply" class="btn-sub-reply" href="javascript:void(0);">发表</a>
                                <a id="a_comment_cancel" href="javascript:void(0);" class="btn-qx btn-sub-reply"
                                   title="取消">取消</a>
                                <!--<a href="javascript:void(0);" class="emoticons-btn">表情</a>-->
                                <a href="javascript:void(0);" class="emoji-btn">颜文字</a>
                            </div>
                        </div>
                        <div id="imageSliderMask" class="image-expand-slider-mask" style="display: none;"></div>
                        <div id="imageSliderWr" class="image-expand-slider" style="display: none;">
                            <div id="imgSliderContain">
                                <img class="main-image" src="" style="" id="imgSliderActive">
                                <a href="javascript:void(0);" class="close-btn" title="关闭" id="imageSliderCloseBtn"></a>
                                <div class="control-btn">
                                    <a class="prev control" title="上一张"></a>
                                    <a class="next control" title="下一张"></a>
                                </div>
                                <div id="imgSliderPager" class="pager-list"></div>
                            </div>
                        </div>
                    </div>

                </div><!--Comment-->
<!--{{userInfo}}-->
            </div>
            <em>
            </em></div>
        <em>
        </em></em>
    <!--{{pageNum1}}=={{total1}}=={{pages}}=={{firstRemarkList}}==++++++++{{likeOnce}}-->
</div>
<!-- 在这里结束 -->
    <div>
        <el-dialog title="提交反馈" :visible.sync="addPerFormVisible" :close-on-click-modal="false" @close="clearAddCache" >

            <el-form :model="addForm" ref="addForm" label-width="100px" class="demo-ruleForm" size="mini">
                <!--{{addForm}}-->
                <el-form-item label="反馈分类" prop="reportType">
                    <el-select v-model="addForm.reportType" placeholder="请选择标签">
                        <el-option label="请选择" value="" v-show="false"></el-option>
                        <el-option  label="作品举报" :value="2" v-show="false"></el-option>
                        <el-option  label="评论举报" :value="1" v-show="false"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="反馈内容" prop="reportText">
                    <el-input type="textarea" v-model="addForm.reportText" :autosize="{minRows: 6}"></el-input>
                </el-form-item>
                <el-form-item label="上传图片">
                    <el-upload
                            class="avatar-uploader"
                            :headers="myheaders"
                            :action="uploadUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            name="headerImg">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="submitForm('addForm')" style="margin-left:500px;width:70px">提交</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
    </div>
    <!-- 上面是模态框(资源和评论的举报通用) -->

    <div>
        <el-dialog title="发表评论" :visible.sync="addRemarkVisible" :close-on-click-modal="false" @close="clearRemarkCache" >
<!--            {{replyForm}}-->
            <el-form :model="replyForm" ref="replyForm" label-width="100px" class="demo-ruleForm" size="mini">
                <el-form-item label="评论内容" prop="reportText">
                    <el-input type="textarea" v-model="replyForm.remarkText" :autosize="{minRows: 6}"></el-input>
                </el-form-item>
                <el-form-item style="margin-left:400px">
                    <el-button  type="default" @click="closeRemarkForm()" >取消</el-button>
                    <el-button type="info" @click="submitReplyForm('replyForm')" >发表</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
    </div>
<!-- 上面还是模态框,发表一级评论和回复一级评论通用 -->

    <!---------- 底部内容 ---------->
    <div id="footer">
        <div class="container auto-width">
            <div class="footer-top clearfix">
                <div class="footer-nav fl">
                    <div class="item">
                        <h4>合作</h4>
                        <p>
                            <a href="#">关于我们</a>
                            <a href="#">联系我们</a>
                            <br>
                            <a href="#">AC招聘</a>
                        </p>
                    </div>
                    <span class="line"></span>
                    <div class="item">
                        <h4>官方</h4>
                        <p>
                            <a href="#">新浪微博</a>
                            <a href="#">官方网店</a>
                            <br>
                            <a href="#">微信公众号<img src="/images/footer-arcode.jpg" class="footer-orcode" alt="#"></a>
                        </p>
                    </div>
                    <span class="line"></span>
                    <div class="item">
                        <h4>下载</h4>
                        <p>
                            <a href="#" class="mg-0">移动客户端</a>
                            <span class="new">new</span>
                            <br>
                            <a href="#">AC娘表情包</a>
                        </p>
                    </div>
                    <span class="line"></span>
                    <div class="item">
                        <h4>友情链接</h4>
                        <p>
                            <a href="#">斗鱼直播</a>
                            <a href="#">匿名版</a>
                            <br>
                            <a href="#">AC大逃杀</a>
                        </p>
                    </div>
                    <span class="line"></span>
                    <div class="item">
                        <h4>反馈</h4>
                        <p>
                            <a href="#">意见反馈</a>
                            <a href="#">举报</a>
                            <a href="#">帮助中心</a>
                            <br>
                            <a href="#">免责声明</a>
                            <a href="#">用户协议</a>
                        </p>
                    </div>
                </div>
                <div class="footer-img fr">
                    <img src="/images/footer-logo.gif" alt="#">
                </div>
            </div>
            <div class="footer-middle clearfix">
                <div class="item">
                    <a href="#"><i class="icon icon-1"></i>中国互联网举报中心</a>
                    <a href="#"><i class="icon icon-2"></i>网络文化经营单位</a>
                </div>
                <div class="item">
                    <span>京8888888888号</span>
                </div>
                <div class="item">
                    <span>节目制作经营许可证66666666666号</span>

                </div>
            </div>
            <div class="footer-bottom">
                <img src="/images/logo-gray.png" alt="#">
                <p>本站不提供任何视听上传服务，所有内容均来自视频分享站点所提供的公开引用资源。********</p>
            </div>
        </div>
    </div>

    <a href="javascript:;" id="back_top" class="iconfont icon-up"></a>
</div>
</body>
</html>
<script>
        let comicDetailApp=new Vue({

        el:"#comicDetail",
            data:{
                count:1,
                // likeOnce 保存用户已经点过赞的评论的id
                likeOnce:[],
                addRemarkVisible:false,
                hotName:'',
                hotTime:'',
                hotId:'',
                imageUrl:'',
                uploadUrl:'http://localhost:9999/' + "report/upload",
                myheaders:{
                    token:sessionStorage.getItem("token")
                },
                addForm:{
                    reportUserId:this.uid,
                    reportType:'',
                    imgUrl:'',
                    reportText:'',
                    remarkId:'',
                    resourceId:''
                },
                addPerFormVisible:false,
                // 上面开始是elementui的东西
                firstSection:'',
                monthTicket:'',
                thumbStatus:0, // 记录大拇指投票状态
                isCol:0,
                score: {
                    resourceId: '',
                    userId: '',
                    point:''
                },
                voteNum:'',
                myscore:0,
                avgScore:0,
                secondRemarkList:[],
                firstRemarkList:[],
                allSection:[],
                sectionLatest:[],
                pageNum:1,
                pageNum1:1,
                pageSize:20,
                pageSize1:3,
                pageCount :'',
                total:'',
                total1:0,
                pages:0,
                sectionList:[],
                thisSection:[],
                tagName:'',
                tagList:{},
                userInfo:{},
                uid:0,
                username:'',
                rid:'',
                comic:{
                    id:'',
                    name:'',
                    cover:'',
                    writer:'',
                    popularity:'',
                    collectionCount:'',
                    red:'',
                    black:'',
                    isfine:'',
                    buyCount:'',
                    isboy:'',
                    tagId:'',
                    ticketNum:'',
                    status:'',
                    introduceText:''
                },
                testcode:'',
                lastWatchSection:[],
                replyForm: {
                    remarkText:'',
                    resourceId:'',
                    userId:'',
                    beRemarkUserId:'',
                    parentId:'',
                    remarkTime:'',
                    status:'',
                    likeCount:'',
                    remarkCount:''
                }

            },



        // 方法(用于调用和钩子函数初始化等)
        methods: {

            // 为什么拿不到mid
            loveThat(value){

              if(this.uid <= 0 || this.uid==null){
                  swal("请先前往登陆!")
              }else if(this.likeOnce.findIndex(item => item=== value)>=0){
                  // 存在>=0, 不存在为-1
                  swal("您已经对该评论点过赞了,请不要重复点赞!")
              }else{
                  // 把value 赋值给另一个局部变量
                  let likeid = value;
                  this.likeOnce.push(likeid)
                  console.log("此时likeOnce数组为"+this.likeOnce)
                  console.log("点赞的id是======================》"+likeid);
                  let url = "http://localhost:9999/" + "remark/likeThat"
                  axios.get(url,{
                      params:{
                          mid: likeid
                      }
                  }).then(res=>{
                        if(res.data.code==200){
                            this.$message({
                                message:res.data.msg,
                                type:'success',
                                duration: 1000
                            })
                            this.initFirstRemark()
                            this.initSecondRemark()
                        }else{
                            this.$message({
                                message: res.data.msg,
                                type:'error',
                                duration: 1000
                            })
                        }
                  })
              }
            },
            clearRemarkCache(){
                this.resetReplyForm()
            },
            submitReplyForm(){
                // 打印一下parentId
                let url = "http://localhost:9999/"+"remark/add"
                axios.post(url,{
                        remarkText:this.replyForm.remarkText,
                        resourceId:this.replyForm.resourceId,
                        userId:this.replyForm.userId,
                        beRemarkUserId:this.replyForm.beRemarkUserId,
                        parentId:this.replyForm.parentId
                }).then(res =>{
                    if(res.data.code == 200){
                        this.$message({
                            message:res.data.msg,
                            type:'success',
                            duration:1000
                        })
                        this.addRemarkVisible = false;
                        this.resetReplyForm();
                        this.initFirstRemark()
                        this.initSecondRemark()
                    }else{
                        this.$message({
                            message:res.data.msg,
                            type:'error',
                            duration:1000
                        })
                       swal(res.data.msg)
                    }
                })
            },
            closeRemarkForm(){
              this.addRemarkVisible = false;
              this.resetReplyForm();            },
            resetReplyForm(){
              this.replyForm={}
            },
            showReplyDialog(value1,value2){
                if(this.uid >0){
                    this.addRemarkVisible = true;
                    // 发表一级评论的赋值
                    // 事实上不用赋值,rid,uid都已经有了,这里给一下好显示
                    this.replyForm.resourceId = this.rid;
                    this.replyForm.userId = this.uid;
                    // 恰好是我们需要的两个非空的值
                    this.replyForm.beRemarkUserId = value1;
                    this.replyForm.parentId = value2;

                }else{
                    swal("请先登陆再发表评论!")
                }
            },
            goPage(){
              this.pageNum1= document.getElementById("ipt_page_1").value
                this.initFirstRemark()
            },
            // 上面是回复的方法
            submitForm(){
                // 打印一下parentId
                let url = "http://localhost:9999/" + "report/add"
                axios.post(url,{
                        remarkId:this.addForm.remarkId,
                        resourceId:this.addForm.resourceId,
                        reportUserId:this.uid,
                        reportType:this.addForm.reportType,
                        reportText: this.addForm.reportText,
                        imgUrl: this.addForm.imgUrl
                }).then(res =>{
                    if(res.data.code == 200){
                        this.addPerFormVisible = false;
                        this.$message({
                            message:res.data.msg,
                            type:'success',
                            duration:1000
                        })
                        this.resetAddForm();
                        this.imageUrl= "'http://localhost:8081/imgs/'+addForm.imgUrl"
                    }else{
                        this.$message({
                            message:res.data.msg,
                            type:'error',
                            duration:1000
                        })
                    }
                })
            },
            showAddDialog(value1,value2){
                // 2是作品举报
                if (this.uid > 0) {
                    this.addPerFormVisible = true;
                    this.addForm.reportType = value1;
                    if (value1 == 1) {
                        this.addForm.remarkId = value2;
                    } else {
                        this.addForm.resourceId = value2;
                    }
                } else {
                    swal("请先登陆!")
                }

            },
            // 头像上传的两个函数
            // 上传成功之后的回调
            handleAvatarSuccess(res, file) {
                console.log(res,file)
                this.imageUrl = URL.createObjectURL(file.raw);
                this.addForm.imgUrl = res.data
            },
            // 上传之前拦截
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            // 以上
            clearAddCache(){
                this.resetAddForm()
            },
            resetAddForm(){
                this.$refs.addForm.resetFields();
                this.imageUrl='';
            },
            // 上面开始是 elementui 的东西

            /*查询资源第一章的id*/
            initFirstSection(){
                let url = "http://localhost:9999/resource/selectFirstSectionId"
                axios.get(url,{
                    params:{
                        rid:this.rid
                    }
                }).then(res=>{
                    if(res.data.code == 200){
                        this.firstSection = res.data.data;
                        console.log("第一个章节的id:"+this.firstSection);
                    }else{
                        alert(res.data.msg);
                    }
                })
            },
            lastClick(){
                if(this.pageNum1>1) {
                    this.pageNum1 = this.pageNum1 - 1;
                    this.initFirstRemark();
                }
                console.log("页码减一"+this.pageNum1);
            },
            thisClick(pageNum1){
                this.pageNum1 = pageNum1;
                this.initFirstRemark();
                console.log("这一页"+":"+this.pageNum1);
            },
            nextClick(){
                if(this.pageNum1<this.pages) {
                    this.pageNum1 = this.pageNum1 + 1;
                    this.initFirstRemark();
                }
                console.log("页码加一"+this.pageNum1);
            },
            initFirstRemark(){
                let rid = GetQueryString("id");
                console.log(rid+"+++一级评论查询中");
                let url = 'http://localhost:9999/remark/listFirst'
                axios.get(url,{
                    params:{
                        now:this.pageNum1,
                        size:this.pageSize1,
                        rid:rid
                    }
                }).then((res)=>{
                    if(res.data.code == 200){
                        this.firstRemarkList=res.data.data.list;
                        this.pageNum1 = res.data.data.pageNum;
                        this.pageSize1 = res.data.data.pageSize;
                        this.total1 = res.data.data.total;
                        this.pages = res.data.data.pages;
                        console.log(this.firstRemarkList)
                    }else{
                        alert(res.data.msg);
                    }
                })
            },
            initFirstHotRemark(){
                let rid = GetQueryString("id");
                console.log(rid+"+++一级评论查询中");
                let url = 'http://localhost:9999/remark/listHotFirst'
                axios.get(url,{
                    params:{
                        now:this.pageNum1,
                        size:this.pageSize1,
                        rid:rid
                    }
                }).then((res)=>{
                    if(res.data.code == 200){
                        this.firstRemarkList=res.data.data.list;
                        this.pageNum1 = res.data.data.pageNum;
                        this.pageSize1 = res.data.data.pageSize;
                        this.total1 = res.data.data.total;
                        this.pages = res.data.data.pages;
                        console.log(this.firstRemarkList)
                    }else{
                        alert(res.data.msg);
                    }
                })
            },
            showMiddleSection(pageNum){

               this.pageNum=pageNum;
                this.initAllSection();
                document.getElementById("listNew").style.display = "none";
                console.log("成功变换中间的！！！:"+this.pageNum)
                document.getElementById("listAll").style.display = "block";


                console.log(this.allSection+"===="+this.pageNum);


            },
            showSection(){
                this.pageNum = 1;
                this.initAllSection()

            document.getElementById("listNew").style.display = "none";
            console.log("成功变换！！！")
            document.getElementById("listAll").style.display = "block";
        },
            initUser(){
                console.log("initUser++++++++++");
                let url = "http://localhost:9999/user/getLoginUser"
                  axios.get(url,{params:{
                    // 不用写东西
                      }
                  }).then((resp)=>{
                      this.userInfo = resp.data.data;
                      if(this.userInfo!=null){
                          this.uid = this.userInfo.id;
                          this.initLastWatchSection();
                          this.username = this.userInfo.username
                          this.monthTicket = this.userInfo.monthTicket
                          console.log("得到了用户信息吗???"+this.userInfo+":"+this.uid+":"+this.username);
                          this.initMyScore()
                          this.initCol()
                      }
                  })
            },
            initComic(){

                let rid = GetQueryString("id");

                this.initTagList();

                console.log(rid+"=="+"initComic");
                let url = 'http://localhost:9999/resource/selectById'
                axios.get(url,{
                    params:{
                        num:rid
                    }
                }).then((res)=>{
                    if(res.data.code==200){
                        this.comic=res.data.data;
                        this.initTagName();
                        console.log(this.tagName+"=-=-=-=");
                    }else{
                        swal(res.data.data.msg);
                    }
                    // this.initUser()

                    // this.initLastWatchSection()
                })
            },
            initAllSection(){

                let rid = GetQueryString("id");
                console.log("initAllSection++++++++++"+rid);
                let url = "http://localhost:9999/section/list"
                axios.get(url,{
                    params : {
                        now:this.pageNum,
                        size:this.pageSize,
                        id : rid
                    }
                }).then(res=>{
                    console.log('initAllSection',res)
                    if(res.data.code == 200){
                        // this.allSection = res.data.data.list;
                        this.allSection=res.data.data.list;
                        this.pageSize = res.data.data.pageSize;
                        this.pageNum = res.data.data.pageNum;
                        this.total = res.data.data.total;
                        this.pageCount= this.total % this.pageSize == 0 ? this.total / this.pageSize : Math.ceil(this.total/this.pageSize);
                        console.log(this.allSection+"-=-=-=-"+rid);
                        console.log(this.pageCount);
                    }else{
                        this.$message.error(res.data.msg);
                    }


                })
            },
            initLatest(){


                let rid =GetQueryString("id");
                console.log("initSectionList++++++++++"+rid);
                let url = "http://localhost:9999/section/listLatest"
                axios.get(url,{
                    params : {
                        id : rid
                    }
                }).then(res=>{

                        this.sectionList = res.data;
                        this.hotName = this.sectionList[this.sectionList.length-1].name;
                        this.hotTime = this.sectionList[this.sectionList.length-1].updateTime;
                        this.hotId = this.sectionList[this.sectionList.length-1].id;
                        console.log(this.sectionList);

                        document.getElementById("listAll").style.display = "none";
                        document.getElementById("listNew").style.display = "block";

                })
            },
            initTagList(){
                let url = "http://localhost:9999/tag/list"
                axios.get(url).then(res=>{
                   this.tagList=res.data
                    console.log(this.tagList);
                     console.log(this.tagList.length);

                })
            },
            initLastWatchSection(){
                console.log(this.uid+"=="+this.rid+"初始化上次看到的章节");
                let url = 'http://localhost:9999/section/getLastWatchSection'
                axios.get(url,{
                    params:{
                        uid:this.uid,
                        rid:this.rid
                    }
                }).then((res)=>{
                    if(res.data.code == 200){
                        console.log("成功执行查询上次观看章节的函数"+res.data.data)
                        if(res.data.data!=null){
                            this.lastWatchSection=res.data.data
                            console.log("上次观看章节：：："+this.lastWatchSection+this.lastWatchSection.sid+":"+this.lastWatchSection.sname)

                        }
                         }
                   })
            },
            initSecondRemark(){
                let rid = GetQueryString("id");
                console.log("初始化二级评论：" + rid);
                let url = 'http://localhost:9999/remark/listSecond'
                axios.get(url,{
                    params:{
                        rid:rid
                    }
                }).then(res=>{
                    this.secondRemarkList = res.data;
                    console.log("得到二级评论数据"+this.secondRemarkList);
                })
            },
            initLimitSecondRemark(){
              // 隐藏算法,使得二级评论只显示前三条

            },
            showAllSecondRemark(){
                // 展示算法,展示所有二级评论

            },
            initScore(){
                let rid = GetQueryString("id")
                console.log("初始化资源分数"+":"+rid)
                let url = 'http://localhost:9999/score/getAverageById'
                axios.get(url,{
                    params:{
                        rid:rid
                    }
                }).then((res)=>{
                    if(res.data !=null){
                        this.avgScore = res.data
                    }
                    console.log(res.data)
                })
            },
            initMyScore(){
                let rid = GetQueryString("id")
                console.log("初始化用户打分记录"+":"+rid)
                let url = 'http://localhost:9999/score/getMyScore'
                if(this.uid>0){
                    axios.get(url,{
                        params:{
                            rid:rid,
                            uid:this.uid
                        }
                    }).then((res)=>{
                        this.myscore = res.data
                        console.log("我的评分："+this.myscore)
                        this.initStar()
                    })
                }
            },
            // 资源的打分数量
            initVoteNum(){
                let rid = GetQueryString("id");
                let url = 'http://localhost:9999/score/getVoteNum'
                axios.get(url,{
                    params:{
                        rid:rid
                    }
                }).then((res)=>{
                    this.voteNum = res.data
                })
            },
            initStar(){
                console.log("初始化星星们"+this.myscore);
                // 得到用户id和资源id时初始化星星们
                if(this.myscore >0){
                    for(let i = 1;i<=this.myscore/2;i++){
                        document.getElementById("star"+i).src="/images/star_on.gif"
                    }
                    document.getElementById("score").style.pointerEvents = "none"


                }
            },
            saveStar(value){
                let rid = GetQueryString("id")
                let s = value;
                console.log(s+"-----"+this.uid);
                if(this.uid == 0){
                    swal("请先登陆");
                }else{
                    // 打印一下parentId
                    swal("感谢您的评分:"+s*2);
                    document.getElementById("score").style.pointerEvents = "none"
                    let url =  "http://localhost:9999/score/add"
                    this.score.resourceId=rid
                    this.score.userId=this.uid
                    this.score.point = s*2
                    axios.post(url,{
                        resourceId:this.score.resourceId,
                        userId:this.score.userId,
                        point:this.score.point
                    }).then(res =>{
                        if(res.data.code == 200){
                            this.initMyScore();
                            this.initStar();
                            this.initVoteNum()
                            }else{
                            alert("添加打分失败");
                        }
                    })
                }
            },
            initCol(){
                let rid = GetQueryString("id")
                let url = "http://localhost:9999/collection/isCol"
                axios.get(url,{
                    params:{
                        uid:this.uid,
                        rid:rid
                    }
                }).then(res=>{
                    if(res.data.code == 200){
                        this.isCol = res.data.data;
                        console.log("初始化收藏按钮"+this.isCol);
                        }else{
                        swal("判断失败!");
                    }
                    }

                )
            },
            isCollection() {
                let rid = GetQueryString("id")
                if(this.uid == 0){
                    swal("请先登陆!")
                }else{
                    let url = "http://localhost:9999/collection/" + (this.isCol==1?'remove':'add')
                    axios.get(url, {params:{
                            uid: this.uid,
                            rid: rid
                        }
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.isCol = Math.pow(this.isCol - 1, 2);
                            if(this.isCol===1){
                               console.log("收藏成功")
                            }else{
                                swal("取消收藏成功!");
                            }
                        } else {
                            alert(res.data.msg)
                        }
                    })
                }
            },
            voteMTicket(){
                if(this.uid == 0){
                    swal("请先登陆!");
                }else{
                    // 先判断该登陆用户月票数量是否大于0。 否,弹框；是，投票成功（月票-1，作品月票+1）
                    if(this.monthTicket>0){
                        // 调用投票后台接口
                        let url = "http://localhost:9999/resource/voteMTicket"
                        axios.get(url,{
                            params:{
                                rid:this.rid,
                                uid:this.uid
                            }
                            }).then(res=>{
                                if(res.data.code == 200){
                                    swal("投票成功!")
                                }else{
                                    swal(res.data.msg)
                                }
                            }
                        )

                        swal("投票成功!")
                    }else{
                        swal("您的月票不足,请前往充值");
                    }
                }
            },
            initResourceId(){
                this.rid = GetQueryString("id")
            },
            voteThumb(value){
                // 1为红票, 2为黑票，调用后台接口(后台根据 colornum 判断红黑票)
                let colornum = value;
                if(this.thumbStatus==0){
                    // 此时可以投票，投票后 加一
                    let url = "http://localhost:9999/resource/voteThumb"
                    axios.get(url,{
                        params:{
                            rid:this.rid,
                            colornum:colornum
                        }
                    }).then(
                        this.initComic(),
                        swal("投票成功!"),
                        this.thumbStatus = this.thumbStatus + 1
                    )
                }else{
                    swal("您已经投过票了!");
                }

            },
            initTagName(){
                let url = "http://localhost:9999/tag/getTagName"
                console.log("标签名！！！！：：："+this.comic.tagId+this.tagName)
                let tagId = this.comic.tagId
                console.log("tagId::::"+tagId)
                axios.get(url,{
                    params:{
                        id:tagId
                    }
                    }
                ).then(res=> {
                    this.tagName = res.data
                    console.log("标签名！！！！：：：" + this.comic.tagId + this.tagName)
                    }
                )
            }


        },

        // 钩子函数(初始化数据)
        created(){
            // 先初始化tag，最好放在comic函数里面
            this.initComic()
            this.initAllSection()
            this.initLatest()
            this.initFirstRemark()
            this.initSecondRemark()
            this.initScore()
            this.initVoteNum()
            this.initUser()
            this.initResourceId()
            this.initFirstSection()


            // 是否有必要初始化imagePath('http://localhost:8081/')
        }
    })

        let loginAp = new Vue({
            el : "#loginDiv",
            data :{
                loginUser:{
                    id:'',
                    username : '',
                    avatar:'',
                }
            },
            methods:{
                userExit(){
                    let url= "http://localhost:9999/user/logout"
                    axios.get(url).then((resp)=>{
                        if (resp.data!=200){
                            alert("网络繁忙请稍后重试")
                        }else {
                            location.reload()
                        }
                    })

                },
                initUser(){
                    let url = "http://localhost:9999/user/getLoginUser";
                    axios.get(url).then(res=>{
                        if (res.data.code == 200){
                            this.loginUser=res.data.data;
                        }
                    })
                }
            },
            created(){
                this.initUser();
            }

        });
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .avatar {
        width: 50px;
        height: 50px;
        display: block;
    }
</style>